<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="../assets/favicon.ico">
<title>source\jindo.Canvas.js - Jindo Component - AjaxUI@NHN</title>
<link rel="stylesheet" type="text/css" href="../assets/prettify/prettify-min.css" media="screen">
<script type="text/javascript">
	var isMobile = (function() {
		var r = window.devicePixelRatio || 1;
		if (/windows phone/i.test(navigator.userAgent)) { r = 2; }
		
		var s = Math.max(screen.width / r, screen.height / r);
		
		var m = s < 1024;
		var href = m ? "api.mobile.css" : "api.css";
		document.write('<link rel="stylesheet" type="text/css" href="../assets/' + href + '" media="screen">');
		
		return m;
	})();
</script>

<script type="text/javascript" src="../assets/jindo.desktop.min.js"></script>
<script type="text/javascript" src="../assets/jindo_component.min.js"></script>
</head>
<body class="api-page">
<div id="wrap" class="api-main"><!-- 2Depth 접기 : lft_fold 추가 -->

	<div id="header">
		<h1><a href="../index.html"><span class="blind">JindoJS</span></a></h1>
		<div class="info">
			<span class="version">version 1.6.0</span>
			<span class="bar">|</span>
			<span class="help"><span class="ic_help"></span><a href="http://devcode.nhncorp.com/projects/jindo-component/issue" target="_blank">버그신고/문의</a></span>
		</div>
		<div class="menu">
			<button type="button" id="toggle_search_btn" class="btn_sch"><span class="blind">검색</span></button>
			<button type="button" id="toggle_list_btn" class="btn_snb btn_snb_on"><span class="blind">메뉴</span></button>
			<!-- [D] 클릭시 btn_sch_on,btn_snb_on 추가 -->
		</div>
	</div>

	<!-- sch_frm -->
	<div class="sch_frm hide_when_small">
		<h2 class="blind">검색</h2>
		<div class="filter">
			<input type="search" id="api-filter" placeholder="검색어를 입력하세요.">
		</div>
		<div id="search-tab" style="display:none;">
			<ul class="tabs">
			<li class="tc-tab">전체</li>
			<li class="tc-tab">키워드</li>
			<li class="tc-tab">클래스</li>
			<li class="tc-tab">메서드</li>
			<li class="tc-tab">프로퍼티</li>
			<li class="tc-tab">이벤트</li>
			</ul>
			<div class="panels">
				<ul id="api-all" class="tc-panel"></ul>
				<ul id="api-keywords" class="tc-panel"></ul>
				<ul id="api-classes" class="tc-panel"></ul>
				<ul id="api-methods" class="tc-panel"></ul>
				<ul id="api-attrs" class="tc-panel"></ul>
				<ul id="api-events" class="tc-panel"></ul>
			</div>

		</div>
	</div>
	<!-- // sch_frm -->

	<!-- container -->
	<div id="container">
		<!-- left-columns -->
		<div id="left-columns" class="sidemenu has_scrollbar">
			<h2 class="blind"><a href="../index.html"><span>APIs</span></a></h2>
<div class="snb depth1 scrollbar hide_when_small">
	<!-- [D] style="width:135px; height:384px; -->
	<div class="scrollbar-box">
		<div class="scrollbar-content">
			<div><ul>
			            <li class="">
			            	<a href="../classes/jindo.Accordion.html" class="">
			                	Accordion
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.AjaxHistory.html" class="">
			                	AjaxHistory
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.BrowseButton.html" class="">
			                	BrowseButton
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Cache.html" class="">
			                	Cache
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Calendar.html" class="">
			                	Calendar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Canvas.html" class="">
			                	Canvas
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CheckBox.html" class="">
			                	CheckBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CircularRolling.html" class="">
			                	CircularRolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Clipboard.html" class="">
			                	Clipboard
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Component.html" class="">
			                	Component
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DataBridge.html" class="">
			                	DataBridge
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DatePicker.html" class="">
			                	DatePicker
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DefaultTextValue.html" class="">
			                	DefaultTextValue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Dialog.html" class="">
			                	Dialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DragArea.html" class="">
			                	DragArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DropArea.html" class="">
			                	DropArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DynamicTree.html" class="">
			                	DynamicTree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Effect.html" class="">
			                	Effect
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FileUploader.html" class="">
			                	FileUploader
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FloatingLayer.html" class="">
			                	FloatingLayer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Foggy.html" class="">
			                	Foggy
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Formatter.html" class="">
			                	Formatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.HTMLComponent.html" class="">
			                	HTMLComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.InlineTextEdit.html" class="">
			                	InlineTextEdit
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerEffect.html" class="">
			                	LayerEffect
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerManager.html" class="">
			                	LayerManager
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerPosition.html" class="">
			                	LayerPosition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LazyLoading.html" class="">
			                	LazyLoading
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ModalDialog.html" class="">
			                	ModalDialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MouseGesture.html" class="">
			                	MouseGesture
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MultipleAjaxRequest.html" class="">
			                	MultipleAjaxRequest
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumberFormatter.html" class="">
			                	NumberFormatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumericStepper.html" class="">
			                	NumericStepper
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Pagination.html" class="">
			                	Pagination
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Rolling.html" class="">
			                	Rolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RollingChart.html" class="">
			                	RollingChart
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverArea.html" class="">
			                	RolloverArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverClick.html" class="">
			                	RolloverClick
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBar.html" class="">
			                	ScrollBar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBox.html" class="">
			                	ScrollBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectArea.html" class="">
			                	SelectArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectBox.html" class="">
			                	SelectBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Slider.html" class="">
			                	Slider
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.StarRating.html" class="">
			                	StarRating
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TabControl.html" class="">
			                	TabControl
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TextRange.html" class="">
			                	TextRange
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Timer.html" class="">
			                	Timer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Transition.html" class="">
			                	Transition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Tree.html" class="">
			                	Tree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UIComponent.html" class="">
			                	UIComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UploadQueue.html" class="">
			                	UploadQueue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.WatchInput.html" class="">
			                	WatchInput
								
								

							    
						        
			            	</a>
			            </li>
			        </ul></div>
		</div>
	</div>
	<div class="scrollbar-v">
		<div class="scrollbar-button-up"></div>
		<div class="scrollbar-track">
			<div class="scrollbar-thumb" style="top: 0px; height: 222px; "></div>
		</div>
		<div class="scrollbar-button-down"></div>
	</div>
</div>


<button type="button" title="펼치기" class="btn_open">바로가기 열기<span class="ic"></span></button>
<button type="button" title="접기" class="btn_close">바로가기 닫기<span class="ic"></span></button>

		</div>
		<!-- // left-columns -->

		<!-- main content -->
		<div id="main">
			<div class="main_fix">
				<div class="content">
	
	<h1 class="blind">source/jindo.Canvas.js</h1>
	<div class="tc-panel first">
		<dl class="relation">
			<dt>파일명</dt>
			<dd>jindo.Canvas.js</dd>
			<dt>경로</dt>
			<dd>source/</dd>
		</dl>
		<div id="file" class="file">
		    <pre class="code prettyprint linenums">/**
	@version&nbsp;#__VERSION__#
**/

//&nbsp;Copyright&nbsp;2006&nbsp;Google&nbsp;Inc.
//
//&nbsp;Licensed&nbsp;under&nbsp;the&nbsp;Apache&nbsp;License,&nbsp;Version&nbsp;2.0&nbsp;(the&nbsp;&quot;License&quot;);
//&nbsp;you&nbsp;may&nbsp;not&nbsp;use&nbsp;this&nbsp;file&nbsp;except&nbsp;in&nbsp;compliance&nbsp;with&nbsp;the&nbsp;License.
//&nbsp;You&nbsp;may&nbsp;obtain&nbsp;a&nbsp;copy&nbsp;of&nbsp;the&nbsp;License&nbsp;at
//
//&nbsp;&nbsp;&nbsp;http://www.apache.org/licenses/LICENSE-2.0
//
//&nbsp;Unless&nbsp;required&nbsp;by&nbsp;applicable&nbsp;law&nbsp;or&nbsp;agreed&nbsp;to&nbsp;in&nbsp;writing,&nbsp;software
//&nbsp;distributed&nbsp;under&nbsp;the&nbsp;License&nbsp;is&nbsp;distributed&nbsp;on&nbsp;an&nbsp;&quot;AS&nbsp;IS&quot;&nbsp;BASIS,
//&nbsp;WITHOUT&nbsp;WARRANTIES&nbsp;OR&nbsp;CONDITIONS&nbsp;OF&nbsp;ANY&nbsp;KIND,&nbsp;either&nbsp;express&nbsp;or&nbsp;implied.
//&nbsp;See&nbsp;the&nbsp;License&nbsp;for&nbsp;the&nbsp;specific&nbsp;language&nbsp;governing&nbsp;permissions&nbsp;and
//&nbsp;limitations&nbsp;under&nbsp;the&nbsp;License.


if(!document.createElement(&#39;canvas&#39;).getContext){(function(){var&nbsp;m=Math,mr=m.round,ms=m.sin,mc=m.cos,abs=m.abs,sqrt=m.sqrt,Z=10,Z2=Z/2,slice=Array.prototype.slice,dec2hex=[];for(var&nbsp;i=0;i&lt;16;i++){for(var&nbsp;j=0;j&lt;16;j++){dec2hex[i*16+j]=i.toString(16)+j.toString(16);}}
function&nbsp;getContext(){return&nbsp;this.context_||(this.context_=new&nbsp;CanvasRenderingContext2D_(this));}
function&nbsp;bind(f,obj,var_args){var&nbsp;a=slice.call(arguments,2);return&nbsp;function(){return&nbsp;f.apply(obj,a.concat(slice.call(arguments)));};}
var&nbsp;G_vmlCanvasManager_={init:function(opt_doc){if(/MSIE/.test(navigator.userAgent)&amp;&amp;!window.opera){var&nbsp;doc=opt_doc||document;doc.createElement(&#39;canvas&#39;);doc.attachEvent(&#39;onreadystatechange&#39;,bind(this.init_,this,doc));}},init_:function(doc){if(!doc.namespaces[&#39;g_vml_&#39;]){doc.namespaces.add(&#39;g_vml_&#39;,&#39;urn:schemas-microsoft-com:vml&#39;,&#39;#default#VML&#39;);}
if(!doc.namespaces[&#39;g_o_&#39;]){doc.namespaces.add(&#39;g_o_&#39;,&#39;urn:schemas-microsoft-com:office:office&#39;,&#39;#default#VML&#39;);}
if(!doc.styleSheets[&#39;ex_canvas_&#39;]){var&nbsp;ss=doc.createStyleSheet();ss.owningElement.id=&#39;ex_canvas_&#39;;ss.cssText=&#39;canvas{display:inline-block;overflow:hidden;&#39;+&#39;text-align:left;width:300px;height:150px}&#39;+&#39;g_vml_\\:*{behavior:url(#default#VML)}&#39;+&#39;g_o_\\:*{behavior:url(#default#VML)}&#39;;}
var&nbsp;els=doc.getElementsByTagName(&#39;canvas&#39;);for(var&nbsp;i=0;i&lt;els.length;i++){this.initElement(els[i]);}},initElement:function(el){if(!el.getContext){el.getContext=getContext;el.innerHTML=&#39;&#39;;el.attachEvent(&#39;onpropertychange&#39;,onPropertyChange);el.attachEvent(&#39;onresize&#39;,onResize);var&nbsp;attrs=el.attributes;if(attrs.width&amp;&amp;attrs.width.specified){el.style.width=attrs.width.nodeValue+&#39;px&#39;;}else{el.width=el.clientWidth;}
if(attrs.height&amp;&amp;attrs.height.specified){el.style.height=attrs.height.nodeValue+&#39;px&#39;;}else{el.height=el.clientHeight;}}
return&nbsp;el;}};G_vmlCanvasManager_.init();function&nbsp;onPropertyChange(e){var&nbsp;el=e.srcElement;switch(e.propertyName){case&#39;width&#39;:el.style.width=el.attributes.width.nodeValue+&#39;px&#39;;el.getContext().clearRect();break;case&#39;height&#39;:el.style.height=el.attributes.height.nodeValue+&#39;px&#39;;el.getContext().clearRect();break;}}
function&nbsp;onResize(e){var&nbsp;el=e.srcElement;if(el.firstChild){el.firstChild.style.width=el.clientWidth+&#39;px&#39;;el.firstChild.style.height=el.clientHeight+&#39;px&#39;;}}
function&nbsp;createMatrixIdentity(){return[[1,0,0],[0,1,0],[0,0,1]];}
function&nbsp;matrixMultiply(m1,m2){var&nbsp;result=createMatrixIdentity();for(var&nbsp;x=0;x&lt;3;x++){for(var&nbsp;y=0;y&lt;3;y++){var&nbsp;sum=0;for(var&nbsp;z=0;z&lt;3;z++){sum+=m1[x][z]*m2[z][y];}
result[x][y]=sum;}}
return&nbsp;result;}
function&nbsp;copyState(o1,o2){o2.fillStyle=o1.fillStyle;o2.lineCap=o1.lineCap;o2.lineJoin=o1.lineJoin;o2.lineWidth=o1.lineWidth;o2.miterLimit=o1.miterLimit;o2.shadowBlur=o1.shadowBlur;o2.shadowColor=o1.shadowColor;o2.shadowOffsetX=o1.shadowOffsetX;o2.shadowOffsetY=o1.shadowOffsetY;o2.strokeStyle=o1.strokeStyle;o2.globalAlpha=o1.globalAlpha;o2.arcScaleX_=o1.arcScaleX_;o2.arcScaleY_=o1.arcScaleY_;o2.lineScale_=o1.lineScale_;}
function&nbsp;processStyle(styleString){var&nbsp;str,alpha=1;styleString=String(styleString);if(styleString.substring(0,3)==&#39;rgb&#39;){var&nbsp;start=styleString.indexOf(&#39;(&#39;,3);var&nbsp;end=styleString.indexOf(&#39;)&#39;,start+1);var&nbsp;guts=styleString.substring(start+1,end).split(&#39;,&#39;);str=&#39;#&#39;;for(var&nbsp;i=0;i&lt;3;i++){str+=dec2hex[Number(guts[i])];}
if(guts.length==4&amp;&amp;styleString.substr(3,1)==&#39;a&#39;){alpha=guts[3];}}else{str=styleString;}
return{color:str,alpha:alpha};}
function&nbsp;processLineCap(lineCap){switch(lineCap){case&#39;butt&#39;:return&#39;flat&#39;;case&#39;round&#39;:return&#39;round&#39;;case&#39;square&#39;:break;default:return&#39;square&#39;;}}
function&nbsp;CanvasRenderingContext2D_(surfaceElement){this.m_=createMatrixIdentity();this.mStack_=[];this.aStack_=[];this.currentPath_=[];this.strokeStyle=&#39;#000&#39;;this.fillStyle=&#39;#000&#39;;this.lineWidth=1;this.lineJoin=&#39;miter&#39;;this.lineCap=&#39;butt&#39;;this.miterLimit=Z*1;this.globalAlpha=1;this.canvas=surfaceElement;var&nbsp;el=surfaceElement.ownerDocument.createElement(&#39;div&#39;);el.style.width=surfaceElement.clientWidth+&#39;px&#39;;el.style.height=surfaceElement.clientHeight+&#39;px&#39;;surfaceElement.appendChild(el);this.element_=el;this.arcScaleX_=1;this.arcScaleY_=1;this.lineScale_=1;}
var&nbsp;contextPrototype=CanvasRenderingContext2D_.prototype;contextPrototype.clearRect=function(){this.element_.innerHTML=&#39;&#39;;};contextPrototype.beginPath=function(){this.currentPath_=[];};contextPrototype.moveTo=function(aX,aY){var&nbsp;p=this.getCoords_(aX,aY);this.currentPath_.push({type:&#39;moveTo&#39;,x:p.x,y:p.y});this.currentX_=p.x;this.currentY_=p.y;};contextPrototype.lineTo=function(aX,aY){var&nbsp;p=this.getCoords_(aX,aY);this.currentPath_.push({type:&#39;lineTo&#39;,x:p.x,y:p.y});this.currentX_=p.x;this.currentY_=p.y;};contextPrototype.bezierCurveTo=function(aCP1x,aCP1y,aCP2x,aCP2y,aX,aY){var&nbsp;p=this.getCoords_(aX,aY);var&nbsp;cp1=this.getCoords_(aCP1x,aCP1y);var&nbsp;cp2=this.getCoords_(aCP2x,aCP2y);bezierCurveTo(this,cp1,cp2,p);};function&nbsp;bezierCurveTo(self,cp1,cp2,p){self.currentPath_.push({type:&#39;bezierCurveTo&#39;,cp1x:cp1.x,cp1y:cp1.y,cp2x:cp2.x,cp2y:cp2.y,x:p.x,y:p.y});self.currentX_=p.x;self.currentY_=p.y;}
contextPrototype.quadraticCurveTo=function(aCPx,aCPy,aX,aY){var&nbsp;cp=this.getCoords_(aCPx,aCPy);var&nbsp;p=this.getCoords_(aX,aY);var&nbsp;cp1={x:this.currentX_+2.0/3.0*(cp.x-this.currentX_),y:this.currentY_+2.0/3.0*(cp.y-this.currentY_)};var&nbsp;cp2={x:cp1.x+(p.x-this.currentX_)/3.0,y:cp1.y+(p.y-this.currentY_)/3.0};bezierCurveTo(this,cp1,cp2,p);};contextPrototype.arc=function(aX,aY,aRadius,aStartAngle,aEndAngle,aClockwise){aRadius*=Z;var&nbsp;arcType=aClockwise?&#39;at&#39;:&#39;wa&#39;;var&nbsp;xStart=aX+mc(aStartAngle)*aRadius-Z2;var&nbsp;yStart=aY+ms(aStartAngle)*aRadius-Z2;var&nbsp;xEnd=aX+mc(aEndAngle)*aRadius-Z2;var&nbsp;yEnd=aY+ms(aEndAngle)*aRadius-Z2;if(xStart==xEnd&amp;&amp;!aClockwise){xStart+=0.125;}
var&nbsp;p=this.getCoords_(aX,aY);var&nbsp;pStart=this.getCoords_(xStart,yStart);var&nbsp;pEnd=this.getCoords_(xEnd,yEnd);this.currentPath_.push({type:arcType,x:p.x,y:p.y,radius:aRadius,xStart:pStart.x,yStart:pStart.y,xEnd:pEnd.x,yEnd:pEnd.y});};contextPrototype.rect=function(aX,aY,aWidth,aHeight){this.moveTo(aX,aY);this.lineTo(aX+aWidth,aY);this.lineTo(aX+aWidth,aY+aHeight);this.lineTo(aX,aY+aHeight);this.closePath();};contextPrototype.strokeRect=function(aX,aY,aWidth,aHeight){var&nbsp;oldPath=this.currentPath_;this.beginPath();this.moveTo(aX,aY);this.lineTo(aX+aWidth,aY);this.lineTo(aX+aWidth,aY+aHeight);this.lineTo(aX,aY+aHeight);this.closePath();this.stroke();this.currentPath_=oldPath;};contextPrototype.fillRect=function(aX,aY,aWidth,aHeight){var&nbsp;oldPath=this.currentPath_;this.beginPath();this.moveTo(aX,aY);this.lineTo(aX+aWidth,aY);this.lineTo(aX+aWidth,aY+aHeight);this.lineTo(aX,aY+aHeight);this.closePath();this.fill();this.currentPath_=oldPath;};contextPrototype.createLinearGradient=function(aX0,aY0,aX1,aY1){var&nbsp;gradient=new&nbsp;CanvasGradient_(&#39;gradient&#39;);gradient.x0_=aX0;gradient.y0_=aY0;gradient.x1_=aX1;gradient.y1_=aY1;return&nbsp;gradient;};contextPrototype.createRadialGradient=function(aX0,aY0,aR0,aX1,aY1,aR1){var&nbsp;gradient=new&nbsp;CanvasGradient_(&#39;gradientradial&#39;);gradient.x0_=aX0;gradient.y0_=aY0;gradient.r0_=aR0;gradient.x1_=aX1;gradient.y1_=aY1;gradient.r1_=aR1;return&nbsp;gradient;};contextPrototype.drawImage=function(image,var_args){var&nbsp;dx,dy,dw,dh,sx,sy,sw,sh;var&nbsp;oldRuntimeWidth=image.runtimeStyle.width;var&nbsp;oldRuntimeHeight=image.runtimeStyle.height;image.runtimeStyle.width=&#39;auto&#39;;image.runtimeStyle.height=&#39;auto&#39;;var&nbsp;w=image.width;var&nbsp;h=image.height;image.runtimeStyle.width=oldRuntimeWidth;image.runtimeStyle.height=oldRuntimeHeight;if(arguments.length==3){dx=arguments[1];dy=arguments[2];sx=sy=0;sw=dw=w;sh=dh=h;}else&nbsp;if(arguments.length==5){dx=arguments[1];dy=arguments[2];dw=arguments[3];dh=arguments[4];sx=sy=0;sw=w;sh=h;}else&nbsp;if(arguments.length==9){sx=arguments[1];sy=arguments[2];sw=arguments[3];sh=arguments[4];dx=arguments[5];dy=arguments[6];dw=arguments[7];dh=arguments[8];}else{throw&nbsp;Error(&#39;Invalid&nbsp;number&nbsp;of&nbsp;arguments&#39;);}
var&nbsp;d=this.getCoords_(dx,dy);var&nbsp;w2=sw/2;var&nbsp;h2=sh/2;var&nbsp;vmlStr=[];var&nbsp;W=10;var&nbsp;H=10;vmlStr.push(&#39;&nbsp;&lt;g_vml_:group&#39;,&#39;&nbsp;coordsize=&quot;&#39;,Z*W,&#39;,&#39;,Z*H,&#39;&quot;&#39;,&#39;&nbsp;coordorigin=&quot;0,0&quot;&#39;,&#39;&nbsp;style=&quot;width:&#39;,W,&#39;px;height:&#39;,H,&#39;px;position:absolute;&#39;);if(this.m_[0][0]!=1||this.m_[0][1]){var&nbsp;filter=[];filter.push(&#39;M11=&#39;,this.m_[0][0],&#39;,&#39;,&#39;M12=&#39;,this.m_[1][0],&#39;,&#39;,&#39;M21=&#39;,this.m_[0][1],&#39;,&#39;,&#39;M22=&#39;,this.m_[1][1],&#39;,&#39;,&#39;Dx=&#39;,mr(d.x/Z),&#39;,&#39;,&#39;Dy=&#39;,mr(d.y/Z),&#39;&#39;);var&nbsp;max=d;var&nbsp;c2=this.getCoords_(dx+dw,dy);var&nbsp;c3=this.getCoords_(dx,dy+dh);var&nbsp;c4=this.getCoords_(dx+dw,dy+dh);max.x=m.max(max.x,c2.x,c3.x,c4.x);max.y=m.max(max.y,c2.y,c3.y,c4.y);vmlStr.push(&#39;padding:0&nbsp;&#39;,mr(max.x/Z),&#39;px&nbsp;&#39;,mr(max.y/Z),&#39;px&nbsp;0;filter:progid:DXImageTransform.Microsoft.Matrix(&#39;,filter.join(&#39;&#39;),&quot;,&nbsp;sizingmethod=&#39;clip&#39;);&quot;);}else{vmlStr.push(&#39;top:&#39;,mr(d.y/Z),&#39;px;left:&#39;,mr(d.x/Z),&#39;px;&#39;);}
vmlStr.push(&#39;&nbsp;&quot;&gt;&#39;,&#39;&lt;g_vml_:image&nbsp;src=&quot;&#39;,image.src,&#39;&quot;&#39;,&#39;&nbsp;style=&quot;width:&#39;,Z*dw,&#39;px;&#39;,&#39;&nbsp;height:&#39;,Z*dh,&#39;px;&quot;&#39;,&#39;&nbsp;cropleft=&quot;&#39;,sx/w,&#39;&quot;&#39;,&#39;&nbsp;croptop=&quot;&#39;,sy/h,&#39;&quot;&#39;,&#39;&nbsp;cropright=&quot;&#39;,(w-sx-sw)/w,&#39;&quot;&#39;,&#39;&nbsp;cropbottom=&quot;&#39;,(h-sy-sh)/h,&#39;&quot;&#39;,&#39;&nbsp;/&gt;&#39;,&#39;&lt;/g_vml_:group&gt;&#39;);this.element_.insertAdjacentHTML(&#39;BeforeEnd&#39;,vmlStr.join(&#39;&#39;));};contextPrototype.stroke=function(aFill){var&nbsp;lineStr=[];var&nbsp;lineOpen=false;var&nbsp;a=processStyle(aFill?this.fillStyle:this.strokeStyle);var&nbsp;color=a.color;var&nbsp;opacity=a.alpha*this.globalAlpha;var&nbsp;W=10;var&nbsp;H=10;lineStr.push(&#39;&lt;g_vml_:shape&#39;,&#39;&nbsp;filled=&quot;&#39;,!!aFill,&#39;&quot;&#39;,&#39;&nbsp;style=&quot;position:absolute;width:&#39;,W,&#39;px;height:&#39;,H,&#39;px;&quot;&#39;,&#39;&nbsp;coordorigin=&quot;0&nbsp;0&quot;&nbsp;coordsize=&quot;&#39;,Z*W,&#39;&nbsp;&#39;,Z*H,&#39;&quot;&#39;,&#39;&nbsp;stroked=&quot;&#39;,!aFill,&#39;&quot;&#39;,&#39;&nbsp;path=&quot;&#39;);var&nbsp;newSeq=false;var&nbsp;min={x:null,y:null};var&nbsp;max={x:null,y:null};var&nbsp;i;for(i=0;i&lt;this.currentPath_.length;i++){var&nbsp;p=this.currentPath_[i];var&nbsp;c;switch(p.type){case&#39;moveTo&#39;:c=p;lineStr.push(&#39;&nbsp;m&nbsp;&#39;,mr(p.x),&#39;,&#39;,mr(p.y));break;case&#39;lineTo&#39;:lineStr.push(&#39;&nbsp;l&nbsp;&#39;,mr(p.x),&#39;,&#39;,mr(p.y));break;case&#39;close&#39;:lineStr.push(&#39;&nbsp;x&nbsp;&#39;);p=null;break;case&#39;bezierCurveTo&#39;:lineStr.push(&#39;&nbsp;c&nbsp;&#39;,mr(p.cp1x),&#39;,&#39;,mr(p.cp1y),&#39;,&#39;,mr(p.cp2x),&#39;,&#39;,mr(p.cp2y),&#39;,&#39;,mr(p.x),&#39;,&#39;,mr(p.y));break;case&#39;at&#39;:case&#39;wa&#39;:lineStr.push(&#39;&nbsp;&#39;,p.type,&#39;&nbsp;&#39;,mr(p.x-this.arcScaleX_*p.radius),&#39;,&#39;,mr(p.y-this.arcScaleY_*p.radius),&#39;&nbsp;&#39;,mr(p.x+this.arcScaleX_*p.radius),&#39;,&#39;,mr(p.y+this.arcScaleY_*p.radius),&#39;&nbsp;&#39;,mr(p.xStart),&#39;,&#39;,mr(p.yStart),&#39;&nbsp;&#39;,mr(p.xEnd),&#39;,&#39;,mr(p.yEnd));break;}
if(p){if(min.x===null||p.x&lt;min.x){min.x=p.x;}
if(max.x===null||p.x&gt;max.x){max.x=p.x;}
if(min.y===null||p.y&lt;min.y){min.y=p.y;}
if(max.y===null||p.y&gt;max.y){max.y=p.y;}}}
lineStr.push(&#39;&nbsp;&quot;&gt;&#39;);if(!aFill){var&nbsp;lineWidth=this.lineScale_*this.lineWidth;if(lineWidth&lt;1){opacity*=lineWidth;}
lineStr.push(&#39;&lt;g_vml_:stroke&#39;,&#39;&nbsp;opacity=&quot;&#39;,opacity,&#39;&quot;&#39;,&#39;&nbsp;joinstyle=&quot;&#39;,this.lineJoin,&#39;&quot;&#39;,&#39;&nbsp;miterlimit=&quot;&#39;,this.miterLimit,&#39;&quot;&#39;,&#39;&nbsp;endcap=&quot;&#39;,processLineCap(this.lineCap),&#39;&quot;&#39;,&#39;&nbsp;weight=&quot;&#39;,lineWidth,&#39;px&quot;&#39;,&#39;&nbsp;color=&quot;&#39;,color,&#39;&quot;&nbsp;/&gt;&#39;);}else&nbsp;if(typeof&nbsp;this.fillStyle==&#39;object&#39;){var&nbsp;fillStyle=this.fillStyle;var&nbsp;angle=0;var&nbsp;focus={x:0,y:0};var&nbsp;shift=0;var&nbsp;expansion=1;var&nbsp;p0;if(fillStyle.type_==&#39;gradient&#39;){var&nbsp;x0=fillStyle.x0_/this.arcScaleX_;var&nbsp;y0=fillStyle.y0_/this.arcScaleY_;var&nbsp;x1=fillStyle.x1_/this.arcScaleX_;var&nbsp;y1=fillStyle.y1_/this.arcScaleY_;p0=this.getCoords_(x0,y0);var&nbsp;p1=this.getCoords_(x1,y1);var&nbsp;dx=p1.x-p0.x;var&nbsp;dy=p1.y-p0.y;angle=Math.atan2(dx,dy)*180/Math.PI;if(angle&lt;0){angle+=360;}
if(angle&lt;1e-6){angle=0;}}else{p0=this.getCoords_(fillStyle.x0_,fillStyle.y0_);var&nbsp;width=max.x-min.x;var&nbsp;height=max.y-min.y;focus={x:(p0.x-min.x)/width,y:(p0.y-min.y)/height};width/=this.arcScaleX_*Z;height/=this.arcScaleY_*Z;var&nbsp;dimension=m.max(width,height);shift=2*fillStyle.r0_/dimension;expansion=2*fillStyle.r1_/dimension-shift;}
var&nbsp;stops=fillStyle.colors_;stops.sort(function(cs1,cs2){return&nbsp;cs1.offset-cs2.offset;});var&nbsp;length=stops.length;var&nbsp;color1=stops[0].color;var&nbsp;color2=stops[length-1].color;var&nbsp;opacity1=stops[0].alpha*this.globalAlpha;var&nbsp;opacity2=stops[length-1].alpha*this.globalAlpha;var&nbsp;colors=[];for(i=0;i&lt;length;i++){var&nbsp;stop=stops[i];colors.push(stop.offset*expansion+shift+&#39;&nbsp;&#39;+stop.color);}
lineStr.push(&#39;&lt;g_vml_:fill&nbsp;type=&quot;&#39;,fillStyle.type_,&#39;&quot;&#39;,&#39;&nbsp;method=&quot;none&quot;&nbsp;focus=&quot;100%&quot;&#39;,&#39;&nbsp;color=&quot;&#39;,color1,&#39;&quot;&#39;,&#39;&nbsp;color2=&quot;&#39;,color2,&#39;&quot;&#39;,&#39;&nbsp;colors=&quot;&#39;,colors.join(&#39;,&#39;),&#39;&quot;&#39;,&#39;&nbsp;opacity=&quot;&#39;,opacity2,&#39;&quot;&#39;,&#39;&nbsp;g_o_:opacity2=&quot;&#39;,opacity1,&#39;&quot;&#39;,&#39;&nbsp;angle=&quot;&#39;,angle,&#39;&quot;&#39;,&#39;&nbsp;focusposition=&quot;&#39;,focus.x,&#39;,&#39;,focus.y,&#39;&quot;&nbsp;/&gt;&#39;);}else{lineStr.push(&#39;&lt;g_vml_:fill&nbsp;color=&quot;&#39;,color,&#39;&quot;&nbsp;opacity=&quot;&#39;,opacity,&#39;&quot;&nbsp;/&gt;&#39;);}
lineStr.push(&#39;&lt;/g_vml_:shape&gt;&#39;);this.element_.insertAdjacentHTML(&#39;beforeEnd&#39;,lineStr.join(&#39;&#39;));};contextPrototype.fill=function(){this.stroke(true);};contextPrototype.closePath=function(){this.currentPath_.push({type:&#39;close&#39;});};contextPrototype.getCoords_=function(aX,aY){var&nbsp;m=this.m_;return{x:Z*(aX*m[0][0]+aY*m[1][0]+m[2][0])-Z2,y:Z*(aX*m[0][1]+aY*m[1][1]+m[2][1])-Z2};};contextPrototype.save=function(){var&nbsp;o={};copyState(this,o);this.aStack_.push(o);this.mStack_.push(this.m_);this.m_=matrixMultiply(createMatrixIdentity(),this.m_);};contextPrototype.restore=function(){copyState(this.aStack_.pop(),this);this.m_=this.mStack_.pop();};function&nbsp;matrixIsFinite(m){for(var&nbsp;j=0;j&lt;3;j++){for(var&nbsp;k=0;k&lt;2;k++){if(!isFinite(m[j][k])||isNaN(m[j][k])){return&nbsp;false;}}}
return&nbsp;true;}
function&nbsp;setM(ctx,m,updateLineScale){if(!matrixIsFinite(m)){return;}
ctx.m_=m;if(updateLineScale){var&nbsp;det=m[0][0]*m[1][1]-m[0][1]*m[1][0];ctx.lineScale_=sqrt(abs(det));}}
contextPrototype.translate=function(aX,aY){var&nbsp;m1=[[1,0,0],[0,1,0],[aX,aY,1]];setM(this,matrixMultiply(m1,this.m_),false);};contextPrototype.rotate=function(aRot){var&nbsp;c=mc(aRot);var&nbsp;s=ms(aRot);var&nbsp;m1=[[c,s,0],[-s,c,0],[0,0,1]];setM(this,matrixMultiply(m1,this.m_),false);};contextPrototype.scale=function(aX,aY){this.arcScaleX_*=aX;this.arcScaleY_*=aY;var&nbsp;m1=[[aX,0,0],[0,aY,0],[0,0,1]];setM(this,matrixMultiply(m1,this.m_),true);};contextPrototype.transform=function(m11,m12,m21,m22,dx,dy){var&nbsp;m1=[[m11,m12,0],[m21,m22,0],[dx,dy,1]];setM(this,matrixMultiply(m1,this.m_),true);};contextPrototype.setTransform=function(m11,m12,m21,m22,dx,dy){var&nbsp;m=[[m11,m12,0],[m21,m22,0],[dx,dy,1]];setM(this,m,true);};contextPrototype.clip=function(){};contextPrototype.arcTo=function(){};contextPrototype.createPattern=function(){return&nbsp;new&nbsp;CanvasPattern_();};function&nbsp;CanvasGradient_(aType){this.type_=aType;this.x0_=0;this.y0_=0;this.r0_=0;this.x1_=0;this.y1_=0;this.r1_=0;this.colors_=[];}
CanvasGradient_.prototype.addColorStop=function(aOffset,aColor){aColor=processStyle(aColor);this.colors_.push({offset:aOffset,color:aColor.color,alpha:aColor.alpha});};function&nbsp;CanvasPattern_(){}
G_vmlCanvasManager=G_vmlCanvasManager_;CanvasRenderingContext2D=CanvasRenderingContext2D_;CanvasGradient=CanvasGradient_;CanvasPattern=CanvasPattern_;})();}

/**
	HTML5&nbsp;Canvas&nbsp;엘리먼트를&nbsp;생성하고&nbsp;간단한&nbsp;그래픽&nbsp;작업을&nbsp;할&nbsp;수&nbsp;있도록&nbsp;지원하는&nbsp;컴포넌트
	
	@class&nbsp;jindo.Canvas
	@keyword&nbsp;canvas,&nbsp;graphic,&nbsp;캔버스,&nbsp;그래픽
**/
jindo.Canvas&nbsp;=&nbsp;jindo.$Class({
	/**
		@constructor
		@param&nbsp;{HTMLElement}&nbsp;[el]&nbsp;canvas&nbsp;엘리먼트
	**/
	$init&nbsp;:&nbsp;function(el)&nbsp;{
		if&nbsp;(typeof&nbsp;el&nbsp;==&nbsp;&quot;undefined&quot;)&nbsp;{
			el&nbsp;=&nbsp;jindo.Canvas.create();
		}
		this._el&nbsp;=&nbsp;el;
		this._elContainer&nbsp;=&nbsp;this._el.parentNode;
		this._oContext&nbsp;=&nbsp;jindo.Canvas.getContext(el);
	},
	
	/**
		canvas&nbsp;엘리먼트를&nbsp;가져온다.
		
		@method&nbsp;getElement
		@return&nbsp;{HTMLElement}&nbsp;canvas&nbsp;엘리먼트
	**/
	getElement&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._el;
	},
	
	/**
		canvas&nbsp;엘리먼트의&nbsp;컨테이너&nbsp;엘리먼트를&nbsp;가져온다.
		
		@method&nbsp;getContainer
		@return&nbsp;{HTMLElement}&nbsp;컨테이너&nbsp;엘리먼트
	**/
	getContainer&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._elContainer;
	},
	
	/**
		canvas&nbsp;엘리먼트의&nbsp;너비를&nbsp;구한다.
		
		@method&nbsp;width
		@return&nbsp;{Number}&nbsp;canvas&nbsp;엘리먼트의&nbsp;너비값
	**/
	/**
		canvas&nbsp;엘리먼트의&nbsp;너비를&nbsp;설정한다.
		
		@method&nbsp;width
		@param&nbsp;{Number}&nbsp;n&nbsp;지정할&nbsp;너비값
		@return&nbsp;{this}&nbsp;너비값을&nbsp;설정한&nbsp;canvas&nbsp;인스턴스&nbsp;자신
	**/
	width&nbsp;:&nbsp;function(n)&nbsp;{
		if&nbsp;(typeof&nbsp;n&nbsp;==&nbsp;&quot;number&quot;)&nbsp;{
			this._el.width&nbsp;=&nbsp;n;
			return&nbsp;this;
		}
		return&nbsp;this._el.width;
	},
	
	/**
		canvas&nbsp;엘리먼트의&nbsp;높이를&nbsp;구한다.
		
		@method&nbsp;height
		@return&nbsp;{Number}&nbsp;canvas&nbsp;엘리먼트의&nbsp;높이값&nbsp;
	**/
	/**
		canvas&nbsp;엘리먼트의&nbsp;높이를&nbsp;설정한다.
		
		@method&nbsp;height
		@param&nbsp;{Number}&nbsp;n&nbsp;지정할&nbsp;높이값
		@return&nbsp;{this}&nbsp;높이값을&nbsp;설정한&nbsp;canvas&nbsp;인스턴스&nbsp;자신
	**/
	height&nbsp;:&nbsp;function(n)&nbsp;{
		if&nbsp;(typeof&nbsp;n&nbsp;==&nbsp;&quot;number&quot;)&nbsp;{
			this._el.height&nbsp;=&nbsp;n;
			return&nbsp;this;
		}
		return&nbsp;this._el.height;
	},
	
	/**
		canvas&nbsp;엘리먼트의&nbsp;컨텍스트를&nbsp;가져온다.
		
		@method&nbsp;getContext
		@return&nbsp;{Object}&nbsp;canvas의&nbsp;컨텍스트&nbsp;객체
	**/
	getContext&nbsp;:&nbsp;function(){
		return&nbsp;this._oContext;
	},
	
	/**
		canvas&nbsp;엘리먼트&nbsp;내부를&nbsp;모두&nbsp;지운다.
		
		@method&nbsp;clear
		@return&nbsp;{this}&nbsp;내부를&nbsp;모두&nbsp;지운&nbsp;canvas&nbsp;인스턴스&nbsp;자신
	**/
	clear&nbsp;:&nbsp;function(){
		this._oContext.clearRect(0,&nbsp;0,&nbsp;this._el.width,&nbsp;this._el.height);
		return&nbsp;this;
	},
	
	_merge&nbsp;:&nbsp;function(ctx,&nbsp;htOption)&nbsp;{
		for&nbsp;(var&nbsp;sKey&nbsp;in&nbsp;htOption)&nbsp;{
			ctx[sKey]&nbsp;=&nbsp;htOption[sKey];
		}
	},
	
	/**
		여러개의&nbsp;점으로&nbsp;이루어진&nbsp;선을&nbsp;그린다.
		
		@method&nbsp;drawLine
		@param&nbsp;{Array}&nbsp;a&nbsp;좌표셋의&nbsp;배열
		@param&nbsp;{Object}&nbsp;htOption&nbsp;컨텍스트에&nbsp;지정할&nbsp;옵션
		@param&nbsp;{Boolean}&nbsp;[bBlockAntiAlias=true]&nbsp;안티앨리어싱을&nbsp;막을지&nbsp;여부
		@return&nbsp;{this}&nbsp;canvas&nbsp;인스턴스&nbsp;자신
		@remark&nbsp;선의&nbsp;두께&nbsp;(lineWidth)&nbsp;가&nbsp;홀수일경우&nbsp;x,&nbsp;y&nbsp;좌표에&nbsp;0.5를&nbsp;더해&nbsp;anti-aliasing되지&nbsp;않도록&nbsp;보정한다.
		@example
			drawLine([[0,&nbsp;0],&nbsp;[1,&nbsp;1]],&nbsp;{&nbsp;lineWidth&nbsp;:&nbsp;1,&nbsp;strokeStyle&nbsp;:&nbsp;&quot;rgb(255,&nbsp;0,&nbsp;0)&quot;&nbsp;});
	**/
	drawLine&nbsp;:&nbsp;function(a,&nbsp;htOption,&nbsp;bBlockAntiAlias)&nbsp;{
		var&nbsp;ctx&nbsp;=&nbsp;this._oContext,
			nAdjust&nbsp;=&nbsp;0,
			nLen&nbsp;=&nbsp;a.length,
			i;
		
		htOption&nbsp;=&nbsp;htOption&nbsp;||&nbsp;{};
		
		if&nbsp;(nLen&nbsp;&gt;&nbsp;1)&nbsp;{
			if&nbsp;(typeof&nbsp;bBlockAntiAlias&nbsp;==&nbsp;&quot;undefined&quot;)&nbsp;{
				bBlockAntiAlias&nbsp;=&nbsp;true;
			}
			
			ctx.save();
			this._merge(ctx,&nbsp;htOption);
			
			ctx.beginPath();
			if&nbsp;(bBlockAntiAlias)&nbsp;{
				if&nbsp;(ctx.lineWidth&nbsp;%&nbsp;2&nbsp;===&nbsp;1)&nbsp;{
					nAdjust&nbsp;=&nbsp;0.5;
				}
				if&nbsp;(nLen&nbsp;===&nbsp;2)&nbsp;{
					if&nbsp;(a[0][0]&nbsp;===&nbsp;a[1][0])&nbsp;{
						ctx.moveTo((Math.round(a[0][0])&nbsp;+&nbsp;nAdjust),&nbsp;a[0][1]);
						ctx.lineTo((Math.round(a[1][0])&nbsp;+&nbsp;nAdjust),&nbsp;a[1][1]);
					}
					if&nbsp;(a[0][1]&nbsp;===&nbsp;a[1][1])&nbsp;{
						ctx.moveTo(a[0][0],&nbsp;(Math.round(a[0][1])&nbsp;+&nbsp;nAdjust));
						ctx.lineTo(a[1][0],&nbsp;(Math.round(a[1][1])&nbsp;+&nbsp;nAdjust));
					}
				}&nbsp;else&nbsp;{
					ctx.moveTo((Math.round(a[0][0])&nbsp;+&nbsp;nAdjust),&nbsp;(Math.round(a[0][1])&nbsp;+&nbsp;nAdjust));
					for&nbsp;(i&nbsp;=&nbsp;1;&nbsp;i&nbsp;&lt;&nbsp;nLen;&nbsp;i++)&nbsp;{
						ctx.lineTo((Math.round(a[i][0])&nbsp;+&nbsp;nAdjust),&nbsp;(Math.round(a[i][1])&nbsp;+&nbsp;nAdjust));
					}
				}
			}&nbsp;else&nbsp;{
				ctx.moveTo(a[0][0],&nbsp;a[0][1]);
				for&nbsp;(i&nbsp;=&nbsp;1;&nbsp;i&nbsp;&lt;&nbsp;nLen;&nbsp;i++)&nbsp;{
					ctx.lineTo(a[i][0],&nbsp;a[i][1]);
				}
			}
			
			ctx.stroke();
			ctx.closePath();
			ctx.restore();
		}
		return&nbsp;this;
	},
	
	/**
		여러개의&nbsp;점으로&nbsp;이루어진&nbsp;면을&nbsp;그린다.&nbsp;
		
		@method&nbsp;drawFace
		@param&nbsp;{Array}&nbsp;a&nbsp;좌표셋의&nbsp;배열
		@param&nbsp;{Object}&nbsp;htOption&nbsp;컨텍스트에&nbsp;지정할&nbsp;옵션
		@return&nbsp;{this}&nbsp;canvas&nbsp;인스턴스&nbsp;자신
		@remark&nbsp;x,&nbsp;y&nbsp;좌표에&nbsp;0.5를&nbsp;더해&nbsp;anti-aliasing되지&nbsp;않도록&nbsp;보정한다.
		@example
			drawFace([[0,&nbsp;0],&nbsp;[1,&nbsp;1]],&nbsp;{&nbsp;fillStyle&nbsp;:&nbsp;&quot;rgb(255,&nbsp;0,&nbsp;0)&quot;&nbsp;});
	**/
	drawFace&nbsp;:&nbsp;function(a,&nbsp;htOption)&nbsp;{
		var&nbsp;ctx&nbsp;=&nbsp;this._oContext,
			nLen&nbsp;=&nbsp;a.length;
		
		htOption&nbsp;=&nbsp;htOption&nbsp;||&nbsp;{};
		
		if&nbsp;(nLen&nbsp;&gt;&nbsp;2)&nbsp;{
			ctx.save();
			this._merge(ctx,&nbsp;htOption);
			ctx.beginPath();
			ctx.moveTo(a[0][0],&nbsp;a[0][1]);
			for&nbsp;(var&nbsp;i&nbsp;=&nbsp;1;&nbsp;i&nbsp;&lt;&nbsp;nLen;&nbsp;i++)&nbsp;{
				ctx.lineTo(a[i][0],&nbsp;a[i][1]);
			}
			ctx.fill();
			ctx.closePath();
			ctx.restore();
		}
		return&nbsp;this;
	},
	
	_round&nbsp;:&nbsp;function(n,&nbsp;nLineWidth)&nbsp;{
		return&nbsp;(nLineWidth&nbsp;%&nbsp;2&nbsp;===&nbsp;1)&nbsp;?&nbsp;Math.round(n)&nbsp;+&nbsp;0.5&nbsp;:&nbsp;n;&nbsp;
	},
	
	/**
		x,&nbsp;y&nbsp;좌표를&nbsp;기준으로&nbsp;사각형&nbsp;막대를&nbsp;그린다.&nbsp;
		
		@method&nbsp;drawRect
		@param&nbsp;{Number}&nbsp;nX&nbsp;x좌표
		@param&nbsp;{Number}&nbsp;nY&nbsp;y좌표
		@param&nbsp;{Number}&nbsp;nWidth&nbsp;너비
		@param&nbsp;{Number}&nbsp;nHeight&nbsp;높이
		@param&nbsp;{Object}&nbsp;htOption&nbsp;컨텍스트에&nbsp;지정할&nbsp;옵션
		@param&nbsp;{Boolean}&nbsp;bBlockAntiAlias&nbsp;안티앨리어싱을&nbsp;막을지&nbsp;여부&nbsp;(디폴트&nbsp;true)&nbsp;
		@return&nbsp;{this}&nbsp;canvas&nbsp;인스턴스&nbsp;자신
		@remark&nbsp;nWidth&nbsp;값이&nbsp;0보다&nbsp;작으면&nbsp;왼쪽방향으로,&nbsp;0보다&nbsp;크면&nbsp;오른쪽방향으로&nbsp;그리고,&nbsp;nHeight&nbsp;값이&nbsp;0보다&nbsp;작으면&nbsp;위쪽방향으로,&nbsp;0보다&nbsp;크면&nbsp;아래쪽방향으로&nbsp;그린다.&nbsp;
		@remark&nbsp;htOption.strokeStyle이&nbsp;지정되어있고,&nbsp;컨텍스트&nbsp;객체의&nbsp;선의&nbsp;두께(lineWidth)가&nbsp;홀수일경우&nbsp;x,&nbsp;y&nbsp;좌표에&nbsp;0.5를&nbsp;더해&nbsp;anti-aliasing되지&nbsp;않도록&nbsp;보정한다.
		@example
			drawRect(20,&nbsp;100,&nbsp;100,&nbsp;100,&nbsp;{
			&nbsp;&nbsp;&nbsp;&nbsp;fillStyle&nbsp;:&nbsp;&quot;rgb(200,&nbsp;200,&nbsp;200)&quot;
			},&nbsp;true);
			
			drawRect(20,&nbsp;100,&nbsp;100,&nbsp;100,&nbsp;{
			&nbsp;&nbsp;&nbsp;&nbsp;strokeStyle:&quot;rgb(10,&nbsp;10,&nbsp;10)&quot;,&nbsp;lineWidth:1
			},&nbsp;false);
			
			drawRect(20,&nbsp;100,&nbsp;100,&nbsp;100,&nbsp;{
			&nbsp;&nbsp;&nbsp;&nbsp;fillStyle&nbsp;:&nbsp;&quot;rgb(200,&nbsp;200,&nbsp;200)&quot;,&nbsp;strokeStyle:&quot;rgb(10,&nbsp;10,&nbsp;10)&quot;,&nbsp;lineWidth:1
			},&nbsp;true);
	**/
	drawRect&nbsp;:&nbsp;function(nX,&nbsp;nY,&nbsp;nWidth,&nbsp;nHeight,&nbsp;htOption,&nbsp;bBlockAntiAlias)&nbsp;{
		var&nbsp;ctx&nbsp;=&nbsp;this._oContext,
			bFillDefined&nbsp;=&nbsp;typeof&nbsp;htOption[&quot;fillStyle&quot;]&nbsp;!=&nbsp;&quot;undefined&quot;,
			bStrokeDefined&nbsp;=&nbsp;typeof&nbsp;htOption[&quot;strokeStyle&quot;]&nbsp;!=&nbsp;&quot;undefined&quot;&nbsp;&amp;&amp;&nbsp;htOption[&quot;lineWidth&quot;]&nbsp;&gt;&nbsp;0;
		
		htOption&nbsp;=&nbsp;htOption&nbsp;||&nbsp;{};
		
		if&nbsp;(bFillDefined&nbsp;||&nbsp;bStrokeDefined)&nbsp;{
			ctx.save();
			this._merge(ctx,&nbsp;htOption);
			
			if&nbsp;(bFillDefined)&nbsp;{
				ctx.fillRect(nX,&nbsp;nY,&nbsp;nWidth,&nbsp;nHeight);
			}
			if&nbsp;(bStrokeDefined)&nbsp;{
				if&nbsp;(typeof&nbsp;bBlockAntiAlias&nbsp;==&nbsp;&quot;undefined&quot;)&nbsp;{
					bBlockAntiAlias&nbsp;=&nbsp;true;
				}
				
				if&nbsp;(bBlockAntiAlias)&nbsp;{
					nX&nbsp;=&nbsp;this._round(nX,&nbsp;ctx.lineWidth);
					nY&nbsp;=&nbsp;this._round(nY,&nbsp;ctx.lineWidth);
					nHeight&nbsp;=&nbsp;Math.round(nHeight);
					nWidth&nbsp;=&nbsp;Math.round(nWidth);
				}
				ctx.strokeRect(nX,&nbsp;nY,&nbsp;nWidth,&nbsp;nHeight);
			}
			ctx.restore();
		}
		return&nbsp;this;
	}
});

/**
	canvas&nbsp;엘리먼트를&nbsp;생성한다.&nbsp;
	
	@method&nbsp;create
	@static
	@param&nbsp;{Number}&nbsp;nWidth&nbsp;canvas의&nbsp;너비.&nbsp;canvas에&nbsp;지정될&nbsp;width&nbsp;속성&nbsp;값
	@param&nbsp;{Number}&nbsp;nHeight&nbsp;canvas의&nbsp;높이.&nbsp;canvas에&nbsp;지정될&nbsp;height&nbsp;속성&nbsp;값
	@param&nbsp;{HTMLElement}&nbsp;[elParent]&nbsp;append될&nbsp;부모&nbsp;엘리먼트
	@return&nbsp;{HTMLElement}&nbsp;canvas&nbsp;엘리먼트
	@remark&nbsp;IE는&nbsp;exCanvas를&nbsp;사용해&nbsp;초기화한다.
	@example
		jindo.Canvas.create();
		jindo.Canvas.create(300,&nbsp;200);
		jindo.Canvas.create(300,&nbsp;200,&nbsp;document.body);
**/
jindo.Canvas.create&nbsp;=&nbsp;function(nWidth,&nbsp;nHeight,&nbsp;elParent)&nbsp;{
	var&nbsp;elCanvas&nbsp;=&nbsp;document.createElement(&#39;canvas&#39;);
	elCanvas.setAttribute(&quot;width&quot;,&nbsp;nWidth&nbsp;||&nbsp;300);
	elCanvas.setAttribute(&quot;height&quot;,&nbsp;nHeight&nbsp;||&nbsp;150);
	&nbsp;
	if&nbsp;(typeof&nbsp;elCanvas.getContext&nbsp;==&nbsp;&quot;undefined&quot;)&nbsp;{
		G_vmlCanvasManager.initElement(elCanvas);
	}
	if&nbsp;(elParent)&nbsp;{
		elParent.appendChild(elCanvas);
	}
	return&nbsp;elCanvas;
};

/**
	canvas&nbsp;엘리먼트의&nbsp;컨텍스트&nbsp;객체를&nbsp;가져온다.
	
	@method&nbsp;getContext
	@static
	@param&nbsp;{HTMLElement}&nbsp;el&nbsp;canvas&nbsp;엘리먼트
	@return&nbsp;{Object}&nbsp;canvas의&nbsp;컨텍스트&nbsp;객체
**/
jindo.Canvas.getContext&nbsp;=&nbsp;function(el)&nbsp;{
	return&nbsp;el.getContext(&quot;2d&quot;);
};</pre>
		</div>
	</div>
</div>

			</div>
		</div>
		<!-- // main content -->

	</div>
	<!-- // container -->

	<!-- footer -->
	<div id="footer">
		<p>Copyright ©<a href="http://nhncorp.com/" target="_blank">NHN Corp.</a> Platform Ajax Team. All Rights Reserved.</p>
	</div>
	<!-- // footer -->

</div>
<!-- // wrap -->

<style type="text/css">

	.item {
		transition:background .2s linear;
		-webkit-transition:background .2s linear;
		-moz-transition:background .2s linear;
		-o-transition:background .2s linear;
		-ms-transition:background .2s linear;
	}
	
	.highlight {
		background-color:#ffffd8 !important;
	}
	
	li.selected a.highlight {
		background-color:#aa8 !important;
	}
	
	.hide-deprecated .deprecated-item, .hide-inherited .inherited-item, .private {
		display:none;
	}
	
	.scrollbar-v, .scrollbar-h { display:none; }
	.scrollbar-show { display:block; }
	
	.api-page .tbl_fold .more_history { display:none; }
	
	/* FILE */
	.file pre.code {
		border:1px solid #ccc;
		padding:0;
	}
	
	.file ol {
		padding-left: 4em;
		background-color: #f9f9f9;
	}

	.file ol li {
		list-style: decimal;
		border-left:1px solid #ccc;
		padding:2px 4px;
	}
	
	.file li.L1, .file li.L3, .file li.L5, .file li.L7, .file li.L9 {
		background-color: #f9f9f9;	
	}

	.file li.L0, .file li.L2, .file li.L4, .file li.L6, .file li.L8 { 
		background-color: #f0f0f0;
	}
	
</style>
<script type="text/javascript" src="../assets/prettify/prettify-min.js"></script>
<script type="text/javascript" src="../assets/hash.js"></script>
<script type="text/javascript" src="../assets/api-list.js"></script>
<script type="text/javascript" src="../assets/api-search.js"></script>
<script type="text/javascript" src="../assets/../api.js?callback=APISearch.setData"></script>
<script type="text/javascript">
	var projectRoot = "../";
	var projectAssets = "../assets";
	
    apiDocs(projectAssets);	
</script>
</body>
</html>